<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-08-26 14:57:33
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-09-03 12:01:44
 * @FilePath: \orderApp\packageOne\pages\personalInfo\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<route lang="json5" type="page">
{
  layout: "default",
  style: {
    navigationStyle: "custom",
    navigationBarTextStyle: "black",
  },
}
</route>

<template>
  <view class="cuSlider">
      <view class="head">
        <uv-tabs
          :list="list"
          @click="clickType"
          :current="activeType"
          customStyle="background: #fff;flex:1"
          itemStyle="flex: 1;font-weight: 600;
    font-size: 35rpx; height: 70rpx"
          activeStyle="color: #00754A"
          lineColor="#00754A"
        ></uv-tabs>
      </view>
      <swiper
        class="content"
        :style="{ '--height': height + 'px', background: contentColor }"
        scroll-y="true"
        :current="activeType"
        @change="changeType"
      >
        <swiper-item v-for="(item, index) in list" :key="item.id">
            <slot :data="item" :index="index"></slot>
        </swiper-item>
      </swiper>
   
  </view>
</template>

<script lang="ts" setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => [
      {
        name: "tab1",
        id: 0,
      },
      {
        name: "tab2",
        id: 0,
      },
    ],
  },
  height: {
    type: Number,
    default: 20,
  },
  contentColor: {
    type: String,
    default: '#fff'
  }
});

// 当前选中界面
const activeType = ref(0);
// 切换界面
function changeType(val) {
  // console.log(val);
  activeType.value = val.detail.current;
}
// 切换tab
function clickType(val) {
  activeType.value = val.index;
}
onMounted(() => {
});
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
  height: 140rpx;
  margin-top: 1px;
  margin-bottom: 15.38rpx;
  background: #fff;
}
.height {
  height: calc(100vh - var(--height) - 216.92rpx);
}
.content {
  display: inline-block;
  width: calc(100% - 30.77rpx);
  height: calc(100vh - var(--height) - 216.92rpx);
  padding: 30.77rpx;
  padding-right: 0;
  background: #fff;
}
</style>
